<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <style>
       /*头部*/

        .ksd-headerbox{height: 200px;text-align: center;background:url("http://www.51chongyin.com/images/banner1.jpg") #FAFAFA ;background-repeat:no-repeat; background-size:100% 100%; -moz-background-size:100% 100%; color: white;overflow: hidden}
        .ksd-headerbox .title{font-size: 24px; }
        .ksd-headerbox .ksd-cheader-box{width: 650px;margin:0 auto;text-align: center;padding-top: 12px;}
     /*上层内容*/
        .ksd-section{margin-top: 10px}
    </style>
</head>
<body>
<!--头部-->
<header>
    <div class="ksd-headerbox">
        <div class="ksd-cheader-box">
            <h3 class="title pt20 b">2021年度5月学相伴技术反馈统计排行</h3>
            <p class="pt10">描述：如你所愿，在 layui 2.0 的版本中，我们加入了强劲的栅格系统和常见的管理系统布局方案，这意味着你可以采用 layui 排版你的响应式网站和后台管理系统的界面了。layui 的栅格采用业界比较常见的 12 等分规则，手机、平板、PC 桌面中大型屏幕的多终端适配处理，最低能支持到 ie8。而你应当更欣喜的是，layui 终于开放了它经典的管理系统布局方案，快速搭建一个属于你的管理系统将变得十分轻松自如。</p>
            <div class="f10 mt30">
                <span class="mr5">参与人数：50</span>
                <span class="ml10">统计时间：yyyy/m/d hh:mm</span></div>
        </div>
    </div>
</header>
<style>

</style>
<!--上层内容-->
<section class="ksd-section">

    <div class="layui-container ksd-container">
        <div class="layui-row" style="text-align: center">
            <div class="layui-col-md12 tc">
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="main" style="width: 100%;height:400px;"></div>
            </div>
        </div>
    </div>

</section>
<!--底部-->
<footer class="mt20">
    <div class="layui-container ksd-container">
        <div class="layui-row">
            <div class="layui-col-md12 tc">
                <p class="b f20 g6 ">统计还剩余: 0天12小时20分10秒100毫秒</p>
            </div>
        </div>
    </div>

</footer>

<script src="js/vue.min.js"></script>
<script src="layui/layui.js"></script>
<script src="echarts/echarts.min.js"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            }
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>
